<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar fixed>
      <!-- 左侧的插槽 -->
      <template #left>
        <img
          src="@/assets/e07890a448edd4547dc172f955b2cdd.png"
          alt="logo"
          class="logo"
        />
      </template>
      <!-- 右侧的插槽 -->
      <template #right>
        <van-icon
          name="search"
          color="white"
          size="18"
          @click="$router.push('/search')"
        />
      </template>
    </van-nav-bar>
    <!-- 频道列表 -->
    <van-tabs
      v-model="active"
      sticky
      offset-top="50px"
      :before-change="beforeTabsChange"
    >
      <van-tab :title="item.name" v-for="item in channelsList" :key="item.id">
        <artList :channelId="item.id"></artList>
      </van-tab>
      <!-- + 小图标 -->
      <van-icon name="plus" size="16" class="plus" @click="show = true" />
      <!-- 弹出层 -->
      <van-popup v-model="show">
        <div class="popup-container">
          <!-- 弹出层的头部区域 -->
          <van-nav-bar title="频道管理">
            <template #right>
              <van-icon
                name="cross"
                size="14"
                color="white"
                @click="show = false"
              />
            </template>
          </van-nav-bar>

          <!-- 弹出层的主体区域 -->
          <div class="pop-body">
            <!-- 我的频道 -->
            <div class="my-channel-box">
              <div class="channel-title">
                <div>
                  <span class="title-bold">已添加频道：</span>
                  <span class="title-gray">{{
                    isdel ? "点击移除频道" : "点击进入频道"
                  }}</span>
                </div>
                <span class="btn-edit" @click="isdel = !isdel">{{
                  isdel ? "完成" : "编辑"
                }}</span>
              </div>
              <!-- 我的频道列表 -->
              <van-row type="flex">
                <van-col span="6" v-for="item in channelsList" :key="item.id">
                  <!-- 用户的频道 Item 项 -->
                  <div
                    class="channel-item van-hairline--surround"
                    @click="removeChannel(item)"
                  >
                    {{ item.name }}
                    <!-- 删除的图标 -->
                    <van-badge
                      color="transparent"
                      class="cross-badge"
                      v-if="isdel && item.name !== '推荐'"
                    >
                      <template #content>
                        <van-icon
                          name="cross"
                          class="badge-icon"
                          color="#cfcfcf"
                          size="12"
                        />
                      </template>
                    </van-badge>
                  </div>
                </van-col>
              </van-row>
            </div>

            <!-- 分隔线 -->
            <div class="van-hairline--top sp-line"></div>

            <!-- 更多频道 -->
            <div class="more-channel-box">
              <div class="channel-title">
                <div>
                  <span class="title-bold">可添加频道：</span>
                  <span class="title-gray">点击添加频道</span>
                </div>
              </div>
              <!-- 更多频道列表 -->
              <van-row type="flex">
                <van-col span="6" v-for="item in moreChannels" :key="item.id">
                  <div
                    class="channel-item van-hairline--surround"
                    @click="addChannel(item)"
                  >
                    {{ item.name }}
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-popup>
    </van-tabs>
  </div>
</template>

<script>
const nameToTop = {};
import { userListAPI } from "@/api/userList";
import { getAllchannelsAPI, updateUserChannelAPI } from "@/api/homeAPI";
import artList from "@/components/artList/artList.vue";
export default {
  name: "Home",
  data() {
    return {
      active: 0,
      channelsList: [],
      show: false,
      // 所有的频道列表数据
      allChannel: [],
      // 控制删除的状态
      isdel: false,
    };
  },
  components: {
    artList,
  },
  created() {
    this.initUserList();
    this.getAllchannels();
  },
  methods: {
    async initUserList() {
      const { data: res } = await userListAPI();
      if (res.message === "OK") {
        this.channelsList = res.data.channels;
        // console.log(this.channelsList);
      }
    },
    async getAllchannels() {
      const { data: res } = await getAllchannelsAPI();
      // console.log(res);
      if (res.message == "OK") {
        this.allChannel = res.data.channels;
      }
    },
    // 增加频道功能
    addChannel(item) {
      // console.log(item);
      this.channelsList.push(item);
      this.updateUserChannel();
      // console.log(this.allChannel);
    },
    async updateUserChannel() {
      const channels = this.channelsList
        .filter((item) => {
          return item.name !== "推荐";
        })
        .map(function (item, index) {
          return {
            id: item.id,
            seq: index + 1,
          };
        });
      // console.log(channels);
      const { data: res } = await updateUserChannelAPI(channels);
      if (res.message === "OK") {
        this.$notify({ type: "success", message: "更新成功", duration: 1000 });
      }
    },
    // 删除功能
    removeChannel(channel) {
      if (channel.name == "推荐") return;
      if (this.isdel) {
        // 过滤掉当前点击的选项
        this.channelsList = this.channelsList.filter((item) => {
          return item.id !== channel.id;
        });
        // 将更改后的用户频道提交到服务器
        this.updateUserChannel();
      } else {
      }
    },
    // tabs 发生切换之前，触发此方法
    beforeTabsChange() {
      // 把当前"频道名称"对应的"滚动条位置"记录到 nameToTop 对象中
      const name = this.channels[this.active].name;
      nameToTop[name] = window.scrollY;

      // return true 表示允许进行标签页的切换
      return true;
    },
    //
  },
  computed: {
    moreChannels() {
      return this.allChannel.filter((item) => {
        let index = this.channelsList.findIndex((x) => {
          return x.id == item.id;
        });
        if (index === -1) return true;
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    from.meta.top = window.scrollY;
    setTimeout(() => {
      next();
    }, 0);
  },
};
</script>

<style lang="less" scoped>
// 组件外层容器的样式
.home-container {
  padding-top: 46px;
  padding-bottom: 50px;
}
// logo 样式
.logo {
  height: 80%;
}

/deep/ .van-tabs__wrap {
  padding-right: 36px;
  background-color: white;
}

// 频道管理小图标的定位
.plus {
  position: fixed;
  top: 58px;
  right: 10px;
  z-index: 999;
}

.van-popup,
.popup-container {
  background-color: transparent;
  height: 100%;
  width: 100%;
}

.popup-container {
  display: flex;
  flex-direction: column;
}

.pop-body {
  flex: 1;
  overflow: scroll;
  padding: 8px;
  background-color: white;
}

.my-channel-box,
.more-channel-box {
  .channel-title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 28px;
    padding: 0 6px;
    .title-bold {
      font-weight: bold;
    }
    .title-gray {
      color: gray;
      font-size: 12px;
    }
  }
}

.btn-edit {
  border: 1px solid #a3a2a2;
  padding: 0 10px;
  line-height: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 12px;
}

.channel-item {
  font-size: 12px;
  text-align: center;
  line-height: 36px;
  background-color: #fafafa;
  margin: 6px;
}

.cross-badge {
  position: absolute;
  right: -3px;
  top: 0;
  border: none;
}

.sp-line {
  margin: 10px 0 20px 0;
}
</style>
